<!DOCTYPE html>
<html>
<head>
<title>VisualGC.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="./style/visualgc.css">

<script src="./script/jquery-2.0.3.js"></script>
<script src="./script/visualgc.js"></script>
<script src="./script/cache.js"></script>

</head>

<div>
	<button id="reloadBtn">reload</button>
	<button id="refreshStartBtn">Start</button>
	<button id="refreshStopBtn">Stop</button>
	<input id="interval" value="1000"></input>
</div>
<div>
	<table>
		<tr>
			<td><div class="canvasDiv"><canvas id="permCanvas"></canvas></div>
			</td>
			<td><div class="canvasDiv"><canvas id="oldCanvas"></canvas></div>
			</td>
			<td>
				<div class="canvasDiv">
					<canvas id="youthCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="suv1Canvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="suv2Canvas"></canvas>
				</div></td>

			<td>
				<div id="blank"></div></td>

			<td>
				<div class="canvasDiv">
					<canvas id="ctCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="clCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="gcCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="esCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="s0Canvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="s1Canvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="ogCanvas"></canvas>
				</div>
				<div class="canvasDiv">
					<canvas id="pgCanvas"></canvas>
				</div></td>
		</tr>
	</table>
</div>
<div>2013</div>

<script type="text/javascript">
	function paintCanvas() {
		var canvas1 = document.getElementById("permCanvas");
		drawGCSpaceCanvas(canvas1, permSpaceWidth, permSpaceHeight, true);
		var canvas2 = document.getElementById("oldCanvas");
		drawGCSpaceCanvas(canvas2, oldSpaceWidth, oldSPaceHeigth, true);
		var canvas3 = document.getElementById("youthCanvas");
		drawGCSpaceCanvas(canvas3, edenSpaceWidth, edenSpaceHeight, true);
		var canvas3 = document.getElementById("suv1Canvas");
		drawGCSpaceCanvas(canvas3, edenSpaceWidth, suviorSpaceHeight, true);
		var canvas4 = document.getElementById("suv2Canvas");
		drawGCSpaceCanvas(canvas4, edenSpaceWidth, suviorSpaceHeight, true);

		var clCanvas = document.getElementById("ctCanvas");
		drawGCSpaceCanvas(clCanvas, compileTimeGraphWidth,
				compileTimeGraphHeight, true);
		var clCanvas = document.getElementById("clCanvas");
		drawGCSpaceCanvas(clCanvas, classLoaderGraphWidth,
				classLoaderGraphHeight, true);
		var gcCanvas = document.getElementById("gcCanvas");
		drawGCSpaceCanvas(gcCanvas, gcTimeGraphWidth, gcTimeGraphHeight, true);
		var esCanvas = document.getElementById("esCanvas");
		drawGCSpaceCanvas(esCanvas, edenSpaceGraphWidth, edenSpaceGraphHeight,
				true);
		var s0Canvas = document.getElementById("s0Canvas");
		drawGCSpaceCanvas(s0Canvas, s0GraphWidth, s0GraphHeight, true);
		var s1Canvas = document.getElementById("s1Canvas");
		drawGCSpaceCanvas(s1Canvas, s1GraphWidth, s1GraphHeight, true);
		var ogCanvas = document.getElementById("ogCanvas");
		drawGCSpaceCanvas(ogCanvas, oldGenGraphWidth, oldGenGraphHeight, true);
		var pgCanvas = document.getElementById("pgCanvas");
		drawGCSpaceCanvas(pgCanvas, permGenGraphWidth, permGenGraphHeight, true);
	}

	$(window).resize(function() {
		initParameters();
		paintCanvas();
		redrawGC(false);
	});

	$(document).ready(function() {
		initParameters();
		paintCanvas();
	});
</script>



<script type="text/javascript">

	var lruLength = Math.round(window.screen.width * 0.6 / histogramWidth);
	var caches = new Array();
	caches["ctCanvas"] = new LRUCache(lruLength);
	caches["clCanvas"] = new LRUCache(lruLength);
	caches["gcCanvas"] = new LRUCache(lruLength);
	caches["esCanvas"] = new LRUCache(lruLength);
	caches["s0Canvas"] = new LRUCache(lruLength);
	caches["s1Canvas"] = new LRUCache(lruLength);
	caches["ogCanvas"] = new LRUCache(lruLength);
	caches["pgCanvas"] = new LRUCache(lruLength);

	$("#reloadBtn").click(function() {
		refresh();
	});

	var mxjson;

	function refresh() {
		$.ajax({
			url : "test",
			type : "POST",
			dataType : "json",
			success : function(json) {
				//alert("success: " + json.heap.committed);
				mxjson = json;
				redrawGC(true);
			},
			error : function(xhr, status) {
				alert("failed " + status);
			},
			complete : function(xhr, status) {
				//	alert("complete");
			}
		});
	}

	function redrawGC(dataUpdate) {
		if (mxjson != undefined) {
			redrawSpace("permCanvas", mxjson.memory.perm, dataUpdate);
			redrawSpace("oldCanvas", mxjson.memory.old, dataUpdate);
			redrawSpace("youthCanvas", mxjson.memory.eden, dataUpdate);
			redrawSpace("suv1Canvas", mxjson.memory.survivor, dataUpdate);
			//redrawSpace("suv2Canvas", heap, dataUpdate);
			//redrawGraph("ctCanvas", heap, dataUpdate);
			redrawGraph("clCanvas", mxjson.classloader.loadedClassCount, mxjson.classloader.totalLoadedClassCount, dataUpdate);
			//redrawGraph("gcCanvas", heap, dataUpdate);
			redrawGraph("esCanvas", mxjson.memory.eden.used, mxjson.memory.eden.committed, dataUpdate, generateEdenSpaceMessage("esCanvas",mxjson));
			redrawGraph("s0Canvas", mxjson.memory.survivor.used, mxjson.memory.survivor.committed, dataUpdate,generateSurvivorSpaceMessage("s0Canvas",mxjson));
			//redrawGraph("s1Canvas", heap, dataUpdate);
			redrawGraph("ogCanvas", mxjson.memory.old.used, mxjson.memory.old.committed, dataUpdate, generateOldSpaceMessage("ogCanvas",mxjson));
			redrawGraph("pgCanvas", mxjson.memory.perm.used, mxjson.memory.perm.committed, dataUpdate, generatePermSapceMessage("pgCanvas", mxjson));
			//(mxjson.memory.old.max/1024/1024).toFixed(3)
			
		}
	}

	function redrawSpace(canvasId, heap) {
		var canvas = document.getElementById(canvasId);
		var context = canvas.getContext("2d");
		clearRect(context, canvas.width, canvas.height);
		var filled = calculateHeapHeight(heap.used,heap.max,canvas.height);
		//var filled = canvas.height * (1 * Math.random());
		drawFilledGCSpaceCanvas(canvas, filled);
		drawGCSpaceCanvas(canvas, canvas.width, canvas.height);
	}

	function redrawGraph(canvasId, current, total, dataUpdate, text) {
		var canvas = document.getElementById(canvasId);
		var context = canvas.getContext("2d");
		clearRect(context, canvas.width, canvas.height);
		var filled = calculateHeapHeight(current, total, canvas.height);

		/* 	var test = (canvas.height - filled) * Math.random();
			filled = filled + test; */
	
		var _carch = caches[canvasId];
		if (!!dataUpdate) {
			_carch.put(new Date().getTime(), filled);
		}
		drawHistogram(canvas, _carch.items());
		drawGCSpaceCanvas(canvas, canvas.width, canvas.height, false, text);
	}

	var freshser;

	$("#refreshStartBtn").click(function() {
		if (freshser != undefined) {
			clearInterval(freshser);
		}
		freshser = setInterval(refresh, $("#interval").val());
	});

	$("#refreshStopBtn").click(function() {
		if (freshser != undefined) {
			clearInterval(freshser);
		}
	});
	
	
	function generateOldSpaceMessage(canvasId, mxjson) {
		var text = getProperGraphTitlePrefix(canvasId);
		return text + generateMemMsg(mxjson.memory.old);
	}
	
	
	function generatePermSapceMessage(canvasId, mxjson){
		var text = getProperGraphTitlePrefix(canvasId);
		return text + generateMemMsg(mxjson.memory.perm);
	}
	
	function generateEdenSpaceMessage(canvasId, mxjson){
		var text = getProperGraphTitlePrefix(canvasId);
		return text + generateMemMsg(mxjson.memory.eden);
	}
	
	
	function generateSurvivorSpaceMessage(canvasId, mxjson) {
		var text = getProperGraphTitlePrefix(canvasId);
		return text + generateMemMsg(mxjson.memory.survivor);
	}

	
	function getProperGraphTitlePrefix(canvasId) {
		var text = messages[canvasId];
		if (text == undefined)
			text = canvasId;
		return text;
	}

	function generateMemMsg(memJson) {
		var max = (memJson.max / 1024 / 1024).toFixed(3);
		var init = (memJson.committed / 1024 / 1024).toFixed(3);
		return "(" + max + "M," + init + "M)";
	}
</script>

<body>



</body>
</html>
